{% load i18n %}
{% block header %}
<h2>{% blocktrans with category.title as kbcat %}{{ kbcat }}{% endblocktrans %}</h2>
{{ category.description|linebreaks }}
{% endblock %}

{% block item_list %}
<div id="accordion">
{% for item in items %}
<div class="card mb-3">
    <div class="btn btn-link" data-toggle="collapse" data-target="#collapse{{item.id}}" role="region" aria-expanded="true" aria-controls="collapse{{item.id}}">
        <div class="card-header" id="header{{item.id}}">
            <h5 class="mb-0">
                {{ item.title }}
            </h5>
        </div>
    </div>
    <div id="collapse{{item.id}}" class="collapse {% if item.id == selected_item %}show{% endif %}" role="region" aria-labelledby="header{{item.id}}" data-parent="#accordion">
        {% block card_body %}
        <div class="card-body">
            <p class="card-text">{{ item.question }}</p>
            <div class="card-answer">
               {{ item.get_markdown }}
            </div>
            <div class="row">
                {% if request.user.pk %}
                <div class="col-sm">
                    <form method="post" action="{% url "helpdesk:kb_vote" item.pk "up" %}" style="display: inline">{% csrf_token %}
                    <button type="submit" class="btn btn-success btn-circle btn-xl"><i class="fa fa-thumbs-up fa-lg"></i></button></form>
                    <form method="post" action="{% url "helpdesk:kb_vote" item.pk "down" %}" style="display: inline">{% csrf_token %}
                    <button type="submit" class="btn btn-danger btn-circle btn-xl"><i class="fa fa-thumbs-down fa-lg"></i></submit></form>
                </div>
                {% endif %}
                {% if staff %}
                <a href='{% url 'helpdesk:list' %}?kbitem={{item.id}}' class="col-sm">
                    <div class="btn btn-success btn-circle btn-xl float-right"><i class="fa fa-search fa-lg"></i> {{item.num_open_tickets}} {% trans 'open tickets' %}</div>
                </a>

                {% endif %}
                <a href='{% if iframe %}{% url 'helpdesk:submit_iframe' %}{% else %}{% url 'helpdesk:submit' %}{%endif%}?{% if category.queue %}queue={{category.queue.pk}}&_readonly_fields_=queue&{%endif%}kbitem={{item.id}}&{{query_param_string}}' class="col-sm">
                    {% if iframe %}
                    <div class="btn btn-success btn-circle btn-xl float-right"><i  class="fa fa-envelope fa-lg"></i> {% trans 'Contact a human' %}</div>
                    {% else %}
                    <div class="btn btn-success btn-circle btn-xl float-right"><i  class="fa fa-plus-circle fa-lg"></i> {% trans 'Create New Ticket' %}{% trans " Queue: " %}{{item}}</div>
                    {% endif %}
                </a>
            </div>
            <div>
            {% if item.votes != 0 %}
            {% blocktrans with recommendations=item.recommendations votes=item.votes  %}{{ recommendations }} people found this answer useful of {{votes}}{% endblocktrans %}
            {% endif %}
            </div>

        </div>
        {% endblock %}
    </div>
</div>
{% endfor %}
</div>
{% endblock %}
{% block footer %}
{% endblock %}
{% if category.queue %}
<a href='{% if iframe %}{% url 'helpdesk:submit_iframe' %}{% else %}{% url 'helpdesk:submit' %}{%endif%}?queue={{category.queue.pk}}&_readonly_fields_=queue&{{query_param_string}}'>
    {% block submit_button %}
    {% if iframe %}
    <div class="btn btn-danger btn-circle btn-xl float-right"><i class="fa fa-envelope fa-lg"></i> {% trans 'Contact a human' %}</div>
    {% else %}
    <div class="btn btn-danger btn-circle btn-xl float-right"><i class="fa fa-plus-circle fa-lg"></i> {% trans 'Create New Ticket' %}{% if category.queue %}{% trans " Queue: " %}{{category.queue}}{% endif %}</div>
    {% endif %}
    {% endblock %}
</a>
{% endif %}
